<template>
  <div class="TTitle">
    <v-img :width="450" src="./img/基带.png"/>
    <span style="top: -150px;left: -510px;font-size:20px;" class="position-re d-flex flex-column align-center white--text pa-2">
      <span>
        {{ (count / (count + abnormalCount) * 100).toFixed(0) }} %
      </span>
      <span>正常率</span>
    </span>
    <span style="top: -200px;font-size:20px;" :style="{left: `${sumLeft(count + abnormalCount)}rem`}" class="position-re white--text">总数: {{ count + abnormalCount }}</span>
  </div>
</template>
<script>
export default {
  doc: {
    name: '基带'
  },
  props: {
    count: {
      type: Number,
      default: 0,
    },
    abnormalCount: {
      type: Number,
      default: 0,
    }
  },
  computed: {
    sumLeft() {
      return (sum) => {
        // 数字初始位置
        let res = 19
        let sumArr = this.getByteLen(sum + '')
        // 数字长度自增
        res -= (sumArr[0] * 1.27) + (sumArr[1] * 0.32)
        return res
      }
    }
  },
  methods: {
    getByteLen(val) {
      let res = [0,0]
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        // eslint-disable-next-line no-control-regex
        if (a.match(/[^\x00-\xff]/ig) != null) {
          res[0] = res[0] + 1
        }
        else {
          res[1] = res[1] + 1
        }
      }
      return res;
    }
  }
};
</script>
<style scoped>

</style>